<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <!-- 头部内容 -->
      <div class="top-content">
        <div class="top-name">{{ typeName }}单</div>
        <div class="top-stock" @click="goRecord">{{ typeName }}记录</div>
      </div>
      <div class="btns">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="form">
          <el-form-item label="">
            <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray"
              :popper-append-to-body="false" :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'childList',
                }" @change="changeTreeItem" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" :popper-append-to-body="false" clearable
              @change="baseChange">
              <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button class="el-icon-s-home" @click="back()"></el-button>
      </div>
      <div class="nx-content">
        <div class="search-box">
          <el-form :inline="true" ref="formName" :model="ruleForm" class="demo-form-inline form-head">
            <el-form-item label="调整单号"><el-input v-model="ruleForm.code" placeholder=""
                readonly></el-input></el-form-item>
            <el-form-item label="调整入类型">
              <el-input v-model="ruleForm.inTypeName" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="调整出类型">
              <el-input v-model="ruleForm.outTypeName" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="调整时间">
              <el-date-picker v-model="ruleForm.adjustDate" type="date" :editable="false" placeholder="请选择" align="right"
                :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="到达地">
              <el-select v-model="ruleForm.addressArrival" placeholder="请选择" clearable :popper-append-to-body="false">
                <el-option v-for="item in addresssArray" :key="item.id" :label="item.address"
                  :value="item.address"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="ruleForm.remark" placeholder="请输入" class="remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="center-box">
          <div class="center-title">&nbsp;鱼类相关信息</div>
          <div class="right">
            <el-button class="btn" type="primary" @click="handleAdd">新增</el-button>
          </div>
        </div>
        <div class="center-content">
          <NxTablePad :table-cols="tableCols" :table-data="tableData" :pagInationIf="false" :height="'34.8rem'"
            :isIndex="true" class="table-wrap">
            <template slot="beforeSex" slot-scope="scope">
              <span v-if="scope.row.beforeSex == 0">未鉴定</span>
              <span v-if="scope.row.beforeSex == 1">雄</span>
              <span v-if="scope.row.beforeSex == 2">雌</span>
            </template>
            <template slot="nowSex" slot-scope="scope">
              <span v-if="scope.row.nowSex == 0">未鉴定</span>
              <span v-if="scope.row.nowSex == 1">雄</span>
              <span v-if="scope.row.nowSex == 2">雌</span>
            </template>
            <template slot="operation" slot-scope="scope">
              <span @click="handleEdit(scope.row)" style="font-size: 1.86rem" class="nx-btn nx-edit">编辑</span>
              <span @click="handleDelete(scope.row)" style="font-size: 1.86rem" class="nx-btn nx-del">删除</span>
            </template>
          </NxTablePad>
        </div>
        <div class="bottom-content">
          <div class="left">
            <!-- <div>条数合计：</div>
            <div>重量合计：</div>
            <div>金额合计：</div> -->
          </div>
          <div class="right">
            <el-button class="btn-light-blue btn" :disabled="tableData.length == 0" @click="submitForm('formName')">确
              认</el-button>
          </div>
        </div>
      </div>
    </div>
    <AddFishType :addEditId="addEditId" :addEditStatus="addEditStatus" :addFishTypeIsDialog="addFishTypeIsDialog"
      :companyId="companyId" :baseId="baseId" @backData="getBackData" :changeOrderId="changeOrderId"></AddFishType>
  </div>
</template>
<script>
import { isFullscreen } from "@/utils/fullscreen";
import NxTablePad from "@/components/NxTablePad.vue";
import AddFishType from "./components/addFishType.vue";
import { getSysCompanyBases } from "@/api/system";
import { getCompanyInfoTree } from "@/api/company";
import { getDataAdjustOrderWeightDetailPads, delAdjustOrderWeightDetail, saveAdjustOrderWeightPad } from "@/api/adjustment";
import { getObjAddresss } from "@/api/breeding";
export default {
  components: {
    AddFishType,
    NxTablePad,
  },
  data() {
    return {
      searchForm: {
        companyId: "",
        baseId: "",
      },
      ruleForm: {
        companyId: "",
        baseId: "",
        id: "",
        code: "",
        inTypeName: "调整入库",
        outTypeName: "调整出库",
        addressArrival: "",
        adjustDate: "",
        type: 1,
        remark: "",
      },
      tableCols: [
        {
          label: "鱼池名称",
          prop: "fishpondName",
          align: "center",
        },
        {
          label: "鱼名",
          prop: "fishName",
          align: "center",
        },
        {
          label: "鱼编码",
          prop: "fishCode",
          align: "center",
        },
        {
          label: "批次编码",
          prop: "batchCode",
          align: "center",
        },
        {
          label: "卵径",
          prop: "diameter",
          align: "center",
        },
        {
          label: "调整重量",
          prop: "weight",
          align: "center",
        },
        {
          label: "操作",
          slot: "operation",
          align: "center",
          width: "200",
          fixed: "right",
        },
      ],
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      companyArray: [], // 公司集合
      baseArray: [], // 基地集合
      companyId: "", // 公司id
      baseId: "", // 基地id
      typeName: "",
      changeOrderId: "", // 调整单id
      addEditStatus: "add",
      addEditId: "", // 添加编辑rowid
      addFishTypeIsDialog: false,
      fishpondArray: [],
      addresssArray: [], // 地址集合
    };
  },
  mounted() {
    this.userType = Number(window.localStorage.getItem("userType"));
    this.searchForm.userType = this.userType;
    this.typeName = '重量调整';
    this.getCompanyInfoTree();


  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        path: `/workbench/workbench`,
      });
    },
    // 权限管理
    getCompanyInfoTree() {
      if (!this.searchForm.userType) {
        return;
      }

      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        this.companyArray = [
          {
            id: 0,
            name: "总公司",
            parentId: 0,
          },
        ];
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data;
            if (res.data.length > 0) {
              this.searchForm.companyId = res.data[0].id;
              this.companyId = this.searchForm.companyId + "";
              this.getSysCompanyBases();
            }
          }
        });
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1];
        this.companyId = val[val.length - 1] + "";
      } else {
        this.searchForm.companyId = "";
        this.companyId = "";
      }

      this.searchForm.baseId = "";
      this.baseId = "";
      this.baseArray = [];

      // 获取基地列表
      this.getSysCompanyBases();
    },
    getSysCompanyBases() {
      if (this.searchForm.companyId === "" || this.searchForm.companyId == null) {
        return;
      }
      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data;
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id;
            this.baseId = this.searchForm.baseId + "";

            this.getObjAddresss();
            this.getDetail();
          }
        }
      });
    },
    // 基地下拉切换
    baseChange(val) {
      if (val) {
        this.searchForm.baseId = val;
        this.baseId = val + "";
      } else {
        this.searchForm.baseId = "";
        this.baseId = "";
      }

      this.getDetail();
    },
    // 详情
    getDetail() {
      getDataAdjustOrderWeightDetailPads({ changeOrderId: this.changeOrderId }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
      });
    },
    // 删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delAdjustOrderWeightDetail({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getDetail();
            }
          });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveAdjustOrderWeightPad(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });

              // 确认后重置
              this.resetForm();
            }
          });
        }
      });
    },
    // 确认后重置
    resetForm() {
      this.ruleForm = {
        companyId: "",
        baseId: "",
        id: "",
        code: "",
        inTypeName: "调整入库",
        outTypeName: "调整出库",
        addressArrival: "",
        adjustDate: "",
        type: 1,
        remark: "",
      };
      this.tableData = [];

      this.typeName = this.$route.query.name;
    },
    // 新增
    handleAdd() {
      this.addEditId = "";
      this.addEditStatus = "add";
      this.addFishTypeIsDialog = true;
    },
    // 编辑
    handleEdit(row) {
      this.addEditId = row.id + "";
      this.addEditStatus = "edit";
      this.addFishTypeIsDialog = true;
    },
    // 弹窗关闭
    closeAddEdit() {
      this.addFishTypeIsDialog = false;
    },
    // 跳转到入库记录
    goRecord() {
      this.$router.push({
        path: "/adjustment/record",
        query: {
          companyId: this.searchForm.companyId,
          baseId: this.searchForm.baseId,
          typeName: this.typeName,
        },
      });
    },
    // 返回信息
    getBackData(data) {
      this.changeOrderId = data.changeOrderId;
      this.ruleForm.id = data.changeOrderId;
      this.ruleForm.companyId = this.companyId;
      this.ruleForm.baseId = this.baseId;
      this.ruleForm.code = data.code;
    },
    // 获取地址列表
    getObjAddresss() {
      getObjAddresss({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.addresssArray = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 0.59rem;
  height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

* {
  box-sizing: content-box;
}

.btns {
  width: 97%;
  height: 3.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // border: 1px solid red;
  /deep/.el-button {
    font-size: 2.5rem;
  }

  .form {
    /deep/.el-form-item__content {
      width: 22rem;
    }

    /deep/.el-form-item {
      margin-bottom: 0;
    }

    /* selecte 框的高度设置，默认是 40px*/
    /deep/ .el-input__inner {
      height: 4.4rem;
      width: 22rem;
      font-size: 1.86rem;
      // padding-left: 2rem;
    }

    ::v-deep .el-select-dropdown__empty {
      padding: 0.814286rem 3.3rem;
      font-size: 2.2rem;
    }

    ::v-deep .el-select-dropdown__list {
      padding: 1.428571rem 2.5rem;

      .el-select-dropdown__item {
        font-size: 2rem !important;
        padding: 3 5.428571rem !important;
      }
    }
  }
}

.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;

  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .top-content {
      width: 95%;
      height: 5rem;
      margin-bottom: 2rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: "宋体";
      position: relative;
      // border: 1px solid red;
      position: relative;

      .top-name {
        font-size: 2.59rem;
        font-weight: 900;
      }

      .top-stock {
        width: fit-content;
        height: 3rem;
        position: absolute;
        right: 30rem;
        margin-left: 5.71rem;
        margin-top: 1rem;
        text-decoration: underline;
        font-size: 1.86rem;
        font-weight: bold;
        cursor: pointer;
      }
    }

    .nx-content {
      width: 95% !important;
      height: 57rem !important;
      background-color: #ffffff;
      border-radius: 0.43rem;
      display: flex;
      flex-direction: column;

      .search-box {
        border-radius: 0.5rem;
        width: 100%;
        height: 20%;
        border: 0.2rem solid #e4eaee;

        .form-head {
          height: 100%;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          text-align: center;

          /deep/.el-form-item__content {
            width: 21rem !important;
            line-height: 2.957143rem;
            font-size: 2.16rem;
          }

          /deep/.el-input__inner {
            width: 21.64rem;
            height: 3rem;
          }

          /deep/ .el-form-item__label {
            font-size: 1rem;
            line-height: 3rem;
          }

          /deep/.el-form-item {
            margin-top: 0.371429rem;
            margin-bottom: 0.371429rem;
          }

          /deep/.el-input {
            font-size: 1rem !important;
          }

          /deep/.el-input__icon {
            line-height: 3rem;
          }

          ::v-deep .el-date-picker.has-sidebar {
            width: 41.285714rem !important;
          }

          ::v-deep .el-select-dropdown__empty {
            padding: 0.814286rem 3.3rem;
            font-size: 1rem;
          }

          ::v-deep .el-select-dropdown__list {
            .el-select-dropdown__item {
              font-size: 2.16rem;
              height: 3rem;
              line-height: 3rem;
            }
          }

          .remark {
            /deep/.el-input__inner {
              width: 80.5rem;
              height: 3rem;
            }
          }
        }
      }

      .center-box {
        margin-top: 0.6rem;
        display: flex;
        width: 100%;
        justify-content: space-between;

        .center-title {
          display: flex;
          align-items: center;
          font-size: 2.16rem;
          font-family: MicrosoftYaHei;
          border-left: 0.4rem solid #00c187;
          color: #22262e;
        }

        .btn {
          width: 6.65rem;
          height: 2.38rem;
          font-size: 2.16rem;
        }

        .right {
          display: flex;
          justify-content: center;
          align-items: center;

          .el-button--primary {
            color: #fff;
            background-color: #0067c7;
            border-color: #0067c7;
          }
        }
      }

      .center-content {
        margin-top: 1rem;
        width: 100%;
        height: 60%;
        border: 0.2rem solid #e4eaee;
        padding-bottom: 1rem;
        border-bottom: 0.2rem solid #ebeff1;
      }

      .bottom-content {
        display: flex;
        justify-content: space-between;
        margin-top: 0.4rem;

        // border: 1px solid red;
        .left {
          width: 45%;
          display: flex;
          justify-content: space-between;
          line-height: 4.48rem;
          font-size: 1.86rem;
        }

        .right {
          .btn {
            width: 6.65rem;
            height: 2.38rem;
            font-size: 2.16rem;
          }
        }
      }
    }
  }
}
</style>
